<template>
	<view class="content">
		<button style="margin-top: 20rpx;" @click="selectOpen('radio')">单选</button>
		<button style="margin-top: 20rpx;" @click="selectOpen('checkbox')">多选</button>
		<yu-select :showNum="showNum" v-if="yuShow" :defaultValue="defaultValue" :show="yuShow" :type="yuType" name="label"
			:dataLists="yuDataLists" :placeholder="yuPlaceholder" :popupTitle="yuPopupTitle" @cancel="yuShow = false"
			@submit="selectSubmit">
		</yu-select>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const yuShow = ref(false);
const yuDataLists = ref([]);
const yuPlaceholder = ref('请输入名称');
const yuType = ref('radio');
const yuPopupTitle = ref('选择组件示例');
const defaultValue = ref(null);
const showNum = ref(true);
const exampleRadioList = ref([
	{
		label: '选项1',
		value: 1,
		num: undefined
	},
	{
		label: '选项2',
		value: 2,
		num: undefined
	},
	{
		label: '选项3',
		value: 3,
		num: undefined
	},
	{
		label: '选项4',
		value: 4,
		num: undefined
	},
	{
		label: '选项5',
		value: 5,
		num: undefined
	},
	{
		label: '选项6',
		value: 6,
		num: undefined
	}, {
		label: '选项7',
		value: 7,
		num: undefined
	},
	{
		label: '选项8',
		value: 8,
		num: undefined
	},
	{
		label: '选项9',
		value: 9,
		num: undefined
	},
	{
		label: '选项10',
		value: 10,
		num: undefined
	}
]);
const exampleRadioCheck = ref({
	label: '',
	value: null,
	num: null
});
const exampleCheckboxList = ref([
	{
		label: '选项1',
		value: 1,
		num: undefined
	},
	{
		label: '选项2',
		value: 2,
		num: undefined
	},
	{
		label: '选项3',
		value: 3,
		num: undefined
	},
	{
		label: '选项4',
		value: 4,
		num: undefined
	},
	{
		label: '选项5',
		value: 5,
		num: undefined
	},
	{
		label: '选项6',
		value: 6,
		num: undefined
	}, {
		label: '选项7',
		value: 7,
		num: undefined
	},
	{
		label: '选项8',
		value: 8,
		num: undefined
	},
	{
		label: '选项9',
		value: 9,
		num: undefined
	},
	{
		label: '选项10',
		value: 10,
		num: undefined
	}
]);
const exampleCheckboxCheck = ref([]);


function selectOpen(type) {
	yuType.value = type;
	if (type === 'radio') {
		defaultValue.value = exampleRadioCheck.value.value;
		yuDataLists.value = exampleRadioList.value;
	} else {
		defaultValue.value = exampleCheckboxCheck.value.map(v => v.value);
		yuDataLists.value = exampleCheckboxList.value;
	}
	yuShow.value = true;
}

function selectSubmit(e) {
	if (yuType.value === 'radio') {
		exampleRadioCheck.value = e;
		exampleRadioList.value = exampleRadioList.value.map(i => {
			if (e.value === i.value) {
				return {
					...i,
					num: e.num || undefined
				}
			} else {
				return {
					...i,
					num: undefined
				}
			}
		})
	} else {
		exampleCheckboxCheck.value = e;
		exampleCheckboxList.value = exampleCheckboxList.value.map(i => {
			const find = e.find(item => item.value === i.value);
			if (find) {
				return {
					...i,
					num: find.num || undefined
				}
			} else {
				return {
					...i,
					num: undefined
				}
			}
		})
	}
	yuShow.value = false;
}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
